<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
// import { type FormInstance } from "element-plus"
// import { type FormInstance, ElMessage, ElMessageBox } from "element-plus"
// import { Search, Plus } from "@element-plus/icons-vue"
import TableStatus from "@/components/TableStatus/index.vue"
import { getMenuApi } from "@/api/menu"
const loading = ref<boolean>(false)
const tableData = ref<any[]>([])
const arrayToTree = (arr: any, parentId = 0) => {
  const newArr: any = []
  arr.forEach((item: any) => {
    if (item.parentId === parentId) {
      newArr.push({
        ...item,
        children: arrayToTree(arr, item.menuId)
      })
    }
  })
  return newArr
}
const getTableData = () => {
  loading.value = true
  getMenuApi({})
    .then((res: any) => {
      tableData.value = arrayToTree(res.data)
      console.log(tableData.value)
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
getTableData()
//#endregion
</script>

<template>
  <div class="app-container">
    <div v-loading="loading" shadow="never">
      <div class="table-wrapper">
        <el-table :data="tableData" row-key="menuId" border default-expand-all>
          <template #empty>
            <el-empty description="暂无数据" :image-size="80" />
          </template>
          <el-table-column label="名称" align="center" prop="name" show-overflow-tooltip />
          <el-table-column label="上级菜单" align="center" prop="parentName" show-overflow-tooltip />
          <el-table-column label="图标" align="center" prop="icon">
            <template v-slot="scope">
              <SvgIcon :name="'icon-' + scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center" prop="type">
            <template v-slot="scope">
              <table-status v-if="scope.row.type == 0" title="目录" color="#79828f" />
              <table-status v-if="scope.row.type == 1" title="菜单" color="#11cb88" backgroud="#e8f9f3" />
            </template>
          </el-table-column>
          <el-table-column label="排序号" align="center" prop="orderNum" show-overflow-tooltip />
          <el-table-column label="菜单URl" align="center" prop="url" show-overflow-tooltip />
          <!-- <el-table-column label="授权标识" align="center" prop="backgroundDescribe" show-overflow-tooltip /> -->
          <!-- <el-table-column label="操作" align="center" >
            <template v-slot="scope">
              <el-button type="primary" link @click="handleAdd(scope.row)">新增</el-button>
              <el-button type="primary" link @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="primary" link @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  height: 100%;
}
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
.searchForm {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-size: 18px;
  :deep(.el-input__wrapper) {
    border-radius: 15px;
  }
}
</style>
